<template>
  <view class="searchDetail-container">
    <view class="head">
      <view class="text">
        <text class="cuIcon-search icon"></text>
        <input
          :focus="sss"
          v-model="searchContent"
          class="textarea"
          @confirm="searchItem"
          :placeholder="mapPlaceHolder(currentType)"
        />
      </view>
      <view class="cancel" @click="hiddenDialog">取消</view>
    </view>
    <view class="hot" style="margin-top: 30upx">
      <view class="title">热门搜索</view>
      <view class="itemBox">
        <text
          v-for="(item, index) in hotData"
          :key="index"
          @click="searchItem(item)"
          class="item"
          >{{ item.name }}</text
        >
      </view>
    </view>
    <view class="history" style="margin-top: 30upx">
      <view class="title">搜索历史</view>
      <view class="itemBox">
        <view
          v-for="(item, index) in searchHistory"
          @click="searchItem(item)"
          class="item"
          :key="index"
          >{{ item.name }}</view
        >
      </view>
      <view
        style="color: #1296db; margin-top: 15upx; font-size: 24upx"
        v-if="searchHistory.length != 0"
        @click="deleteHistory"
      >
        <text class="cuIcon-delete"></text>清空搜索历史
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "searchDetail",
  props: {
    currentType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      hotData: [
        { name: "RTX3090", type: "xianka" },
        { name: "酷睿i7", type: "cpu" },
        { name: "B450M", type: "zhuban" },
        { name: "酷冷至尊冰神", type: "sanreqi" },
        { name: "爱国者", type: "jixiang" },
      ],
      searchHistory: [],
      searchContent: "",
    };
  },
  mounted() {
    console.log("展示");
    if (wx.getStorageSync("searchHistory"))
      this.searchHistory = wx.getStorageSync("searchHistory");
  },
  methods: {
    // 搜索逻辑
    searchItem(item) {
      let type = this.currentType;
      let content = this.searchContent;
      console.log("当前选择：", type);
      console.log("当前选择：", content);
      if (item.name && item.type) {
        // 选择item项搜索
        type = item.type;
        content = item.name;
        this.saveHistory(item);
      } else {
        let name = content;
        this.saveHistory({ name, type });
      }
      console.log(type, content);
      wx.cloud
        .database()
        .collection(type)
        .where({
          name: wx.cloud.database().RegExp({
            regexp: ".*" + content,
            options: "i",
          }),
        })
        .limit(10)
        .skip(0)
        .get()
        .then((res) => {
          console.log(res.data);
          this.searchContent = "";
          this.$emit("changeCurrentList", this.clearNullPrice(res.data));
          this.$emit("changeCurrentTab", type);
          this.hiddenDialog();
        });
    },
    // 隐藏搜索框
    hiddenDialog() {
      this.$emit("hiddenSearch");
    },

    // 保存搜索历史
    saveHistory(item) {
      this.searchHistory = wx.getStorageSync("searchHistory");
      if (!this.searchHistory) {
        this.searchHistory = [];
      }

      // 保留搜索状态：
      /**
       * 例：历史记录存在酷睿i7 所处分区为cpu
       * 搜索输入酷睿i7 分区为其他，则查询内容失败，同时更新历史记录里的所属分区
       */
      for (let i = 0; i < this.searchHistory.length; i++) {
        if (this.searchHistory[i].name === item.name) {
          this.searchHistory[i].type = item.type;
          return;
        }
      }
      this.searchHistory.unshift(item);
      wx.setStorageSync("searchHistory", this.searchHistory);
    },

    // 清除历史
    deleteHistory() {
      wx.removeStorageSync("searchHistory");
      this.searchHistory = [];
    },
    // 价格展示null删除
      clearNullPrice(list){
       let newList = [];
       list.forEach(item => {
         if(item.price !== null)
            newList.push(item);        
       })
       return newList;
    },
    mapPlaceHolder(type){
      console.log(type)
      let name = ""
      switch(type){
        case "cpu":
        name =  "CPU";
         break;
        case "xianka":
        name = "显卡";
         break;
        case "zhuban":
        name = "主板";
         break;
        case "neicun":
        name =  "内存";
         break;
        case "yingpan":
        name =  "硬盘";
         break;
        case "sanreqi":
        name =  "散热器";
         break;
        case "dianyuan":
        name =  "电源";
         break;
        case "jixiang":
        name =  "机箱";
        break;
      }
      return `请搜索想要的${name}配件`;
    } 
    
  },
};
</script>

<style scoped>
.head {
  display: flex;
  margin-top: 10px;
  justify-content: space-around;
  align-items: center;
}
.icon {
  margin: 0 10px;
  color: #1296db;
}
.cancel {
  margin-right: 20upx;
}
.text {
  display: flex;
  align-items: center;
  width: 605upx;
  height: 60upx;
  background-color: #f0f0f0;
  border-radius: 30upx;
}
.textarea {
  line-height: 60upx;
  width: 520upx;
  height: 100%;
  caret-color: #979797;
  text-align: left;
  color: #323232;
  font-size: 28upx;
}

.hot,
.history {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
}
.title {
  font-weight: bold;
  text-align: left;
}
.itemBox {
  margin-top: 5px;
}
.item {
  display: inline-block;
  margin: 7upx 10upx;
  float: left;
  background-color: #f0f0f0;
  color: #333333;
  padding: 5upx 15upx;
  border-radius: 10upx;
  font-size: 25upx;
  line-height: 48upx;
}
</style>
